<template>
    <el-dialog
        v-model="dialogVisible"
        title="编辑租户信息"
        width="30%"
        :before-close="handClose"
    >
        <div>
            <el-form :model="formData" label-width="100px">
                <el-form-item label="租户号">
                    <el-input v-model="formData.ttc" disabled/>
                </el-form-item>
                <el-form-item label="管理员">
                    <el-input v-model="formData.admin" />
                </el-form-item>
                <el-form-item label="余额">
                    <el-input v-model="formData.balance" />
                </el-form-item>
                <el-form-item label="赠送额度">
                    <el-input v-model="formData.gift" />
                </el-form-item>
                <el-form-item label="套餐计划">
                    <el-select v-model="formData.plan" placeholder="选择套餐">
                        <el-option label="PlanA" value="PlanA" />
                        <el-option label="PlanB" value="PlanB" />
                        <el-option label="PlanC" value="PlanC" />
                        <el-option label="PlanD" value="PlanD" />
                        <el-option label="PlanE" value="PlanE" />
                        <el-option label="PlanF" value="PlanF" />
                    </el-select>
                </el-form-item>
                <el-form-item label="套餐开始日期">
                    <el-date-picker
                        v-model="formData.planStartTime"
                        type="date"
                        placeholder="开始日期, 每30天结算"
                        style="width: 100%"
                        format="YYYY/MM/DD"
                        value-format="YYYY/MM/DD"
                    />
                    <!-- <el-input v-model="formData.planStartTime" /> -->
                </el-form-item>
                <el-form-item label="RPA点数">
                    <el-input v-model="formData.rpapoints" />
                </el-form-item>
                <el-form-item label="最大环境数">
                    <el-input v-model="formData.envLimit" />
                </el-form-item>
                <el-form-item label="最大用户数">
                    <el-input v-model="formData.userLimit" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="confirmDialog">
            更新
            </el-button>
        </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted,reactive, computed, defineProps, defineEmits, watch} from 'vue'
import SuperAdminApi from '../../apis/superadmin';
import {useRouter, useRoute} from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter();
const route = useRoute();

const formData = ref({
    id: -1,
    ttc: "",
    admin: "",
    balance: "",
    gift: "",
    plan: "",
    rpapoints: "",
    planStartTime: "",
    envLimit: "",
    userLimit: ""
})
const props = defineProps({
    isShow: Boolean,
    handleUpdated: Function,
})
const emit = defineEmits(['update:isShow']);

const dialogVisible = ref(props.isShow);
watch(()=> props.isShow,() => {
    console.log('props.isShow change', props.isShow);
    dialogVisible.value = props.isShow
    if(props.isShow){
        loadData();
    }
});

onMounted(()=>{
    loadData();
})

const loadData = () => {
    console.log('[ModifyTenantInfoDialog]loadData', route.params);
    if(!route.params.id){
        return;
    }
    SuperAdminApi.fetchTenant(route.params.id).then(ret=>{
        console.log('[ModifyTenantInfoDialog]fetchTenant', ret);
        formData.value = ret.data;
        if(formData.value.plan==null){
            formData.value.plan = "";
        }
        if(formData.value.planStartTime == null) {
            formData.value.planStartTime = "";
        }
    }).catch(err=>{
        console.log('[ModifyTenantInfoDialog]fetchTenant error', err);
        alert('获取租户信息失败');
    });
}

const handClose = () =>{
    console.log('handClose');
    emit('update:isShow', false)
    router.back();
}

const closeDialog = () => {
    console.log('closeDialog');
    emit('update:isShow', false)
    router.back();
}

const confirmDialog = () => {
    console.log('confirmDialog');
    formData.value = {
        id: formData.value.id,
        ttc: formData.value.ttc,
        admin: formData.value.admin,
        balance: formData.value.balance.toString(),
        gift: formData.value.gift.toString(),
        plan: formData.value.plan.toString(),
        rpapoints: formData.value.rpapoints.toString(),
        planStartTime: formData.value.planStartTime.toString(),
        envLimit: formData.value.envLimit.toString(),
        userLimit: formData.value.userLimit.toString()
    }
    SuperAdminApi.updateTenantInfo(formData.value).then(ret=>{
        if(ret.code == 0){
            ElMessage({
                type: 'success',
                message: "修改成功"
            })
            if(props.handleUpdated){
                props.handleUpdated();
            }
            setTimeout(() => {
                router.back();
            }, 1000);
        }else{
            ElMessage({
                type: 'error',
                message: "编辑失败," + ret.message
            })
        }
    }).catch(err=>{
        ElMessage({
            type: 'error',
            message: err,
        })
    });


}
</script>

<style scoped>
.pagination {
    margin-top: 15px;
}
.searchArea {
    padding-bottom: 10px;
}
.searchButton {
    margin-left: 0px;
}
.searchTextInput {
    width: 120px;
    margin-right: 10px;
}
</style>
